<template>
  <phaser-template :item="item" :pageId="pageId" :popId="popId">
    <template v-slot:common>
      <canvas ref="phaserCanvas" class="wb-phasers" :style="styles"></canvas>
    </template>
  </phaser-template>
</template>

<script>
import PhaserTemplate from '@/components/games/phaser/phaser-template.vue'
import { INJECT_PHASER_CLASS_NAME } from '@/common/const-inject-class'
import { MOBILE_WID_HEI } from '@/common/const-dif'

export default {
  name: "WbPhasers",
  components: {
    PhaserTemplate,
  },
  setup () {
    return {
      game: null,
      injectJsClass: null,
    }
  },
  data () {
    return {
    }
  },
  props: {
    item: Object,
    pageId: {
      type: Number,
      default: -1,
    },
    popId: {
      type: Number,
      default: -1,
    },
  },
  created () {
   if(!this.isH5Edit) {
      let commonAttr = this.commonAttr;
      if(commonAttr.injectJsClass){
        if(INJECT_PHASER_CLASS_NAME[commonAttr.injectJsClass]){
          import(`./js/${commonAttr.injectJsClass}.js`).then((module) => {
            this.injectJsClass = new module.default(this.item);
            const container = document.getElementById(this.item.id);
            if(container) {
              this.initPhaser(window.Phaser);
            }
          })
        }
      }
    }
  },
  computed: {
    conAttr() {
      return this.item.conAttr;
    },
    commonAttr() {
      return this.item.commonAttr;
    },
    styles() {
      return {
        transform: "rotate(" + this.item.commonAttr.rotate + "deg)",
        opacity: this.item.commonAttr.opacity,
        backgroundColor: this.item.styles.backgroundColor
      };
    }
  },
  mounted() {
    this.initPhaser(window.Phaser);
  },
  methods: {
    initPhaser(Phaser) {
      if (!Phaser || this.game || !this.injectJsClass) {
        return;
      }
      let designWidth = this.commonAttr.designWidth;
      let designHeight = this.commonAttr.designHeight;
      let wid = designWidth && designWidth > 0 ? designWidth : this.conAttr.width;
      let hei = designHeight && designHeight > 0 ? designHeight : this.conAttr.height;
      if(this.commonAttr.isFullScreen) {
        wid = MOBILE_WID_HEI.clientWidth*MOBILE_WID_HEI.designScale;
        hei = MOBILE_WID_HEI.clientHeight*MOBILE_WID_HEI.designScale;
      }
      let gameConfig = {
        type: Phaser.WEBGL,
        customEnvironment: true,
        width: wid,
        height: hei,
        canvas: this.$refs.phaserCanvas,
        // parent: document.getElementById(this.item.id),
        zoom: 1,
        scale: {
          mode: Phaser.Scale.FIT,
        },
        transparent: true,
        scene: this.injectJsClass,
      };
      if(this.commonAttr.isPhysics) {
        gameConfig.physics = {
          default: 'arcade',
          arcade: {
            gravity: { y: 300 },
            debug: false
          }
        }
      }
      this.commonAttr.isAutoCenter = true;
      if(this.commonAttr.isAutoCenter) {
        gameConfig.scale.autoCenter = Phaser.Scale.CENTER_BOTH;
      }
      this.game = new Phaser.Game(gameConfig);
    },
    // create() {
    //   var particles = this.add.particles('red');
    //   var emitter = particles.createEmitter({
    //       speed: 100,
    //       scale: { start: 1, end: 0 },
    //       blendMode: 'ADD'
    //   });
    //   var logo = this.physics.add.image(400, 100, 'logo');
    //   logo.setVelocity(100, 200);
    //   logo.setBounce(1, 1);
    //   logo.setCollideWorldBounds(true);
    //   emitter.startFollow(logo);
    // }
  },
  beforeDestroy() {
    this.injectJsClass.destroy(this.$refs.phaserCanvas);
    this.item = null;
    this.pageId = 0;
    this.popId = 0;
    this.game = 0;
  },
};
</script>
<style lang="scss">
.wb-phasers {
  width: inherit;
  height: inherit;
  background-color: transparent;
}
</style>
